<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
<title>jquery实现列表上下无缝循环轮播</title>
<link rel="shortcut icon" href="../img/ic.png" type="image/x-icon"/>
<script src="../js/jquery-3.4.1.min.js"></script>
<style>
.ul_wrap {
width: 50%;
background-color: #00C77A;
margin: 0 auto;
position: relative;
padding: 20px;
height: 150px;
}

ul {
height: 150px;
overflow: hidden;
border: 1px solid black;
margin: 0 auto;
padding: 0;
position: absolute;
left: 50%;
transform: translateX(-50%);
border-radius: 10px;
}

li {
list-style: none;
height: 30px;
line-height: 30px;
padding: 0 20px;
color: #ffffff;
}

li:hover {
background-color: #f5f5f5;
color: blue;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div class="ul_wrap ">
<ul>
<li>富强、民主、文明、和谐、自由1</li>
<li>富强、民主、文明、和谐、自由2</li>
<li>富强、民主、文明、和谐、自由3</li>
<li>富强、民主、文明、和谐、自由4</li>
<li>富强、民主、文明、和谐、自由5</li>
<li>富强、民主、文明、和谐、自由6</li>
</ul>
</div>
</div>
<script>
$(function () {
//定时任务的id
let id;
//ul对象
let ul = $("ul");

//执行轮播的函数
function loop() {
//获得ul中的第1个li对象
let firstLi = $("ul li:eq(0)");
//获得第1个li对象的margin-top值
let marginTop = parseFloat(firstLi.css("margin-top"));
//获得第1个li对象的height值
let height = parseFloat(firstLi.css("height"));
//定时任务函数
id = setTimeout(function () {
//对第1个li对象的margin-top值进行递减操作
marginTop--;
//设置第1个li对象的margin-top值
firstLi.css("margin-top", marginTop + "px");
//如果margin-top值向上滚动距离超过li的高
if (marginTop < -height) {
//把第1个li克隆一份为temp
let temp = firstLi.clone(true);
//设置temp当前元素的margin-top为0
temp.css("margin-top", "0px");
//把temp拼接到ul的最后
ul.append(temp);
//同时删除第1个li元素
firstLi.remove();
}
//递归调用当前函数，循环执行操作
loop();
}, 50);
}

//启动轮播
loop();

//ul的hover暂停和启动效果
ul.on("mouseover", function () {
clearTimeout(id);
}).on("mouseout", function () {
loop();
})
});
</script>
</body>
</html>
